// 产品详情页 手机端
@import '@/styles/common/variables.scss';

.main .bgc_white{
  @include respond('768'){
    background-color: #F9F9F9;
    padding-bottom: 0px;
  }

}
// 产品信息
.main .basicData{
  @include respond('768'){
    width: 100%;
    display: block;
    background-color: #fff;
    max-width: inherit;
    margin: 0;
    padding: 0 0 8px 0;
    .breadcrumb{ // pc端导航取消
      display: none;
    }
    .guide{
      width: 100%;
      margin-right: 0;
      .productImage{
        width: 100%;
        margin: 0;
      }
      padding: 0 20px;
    }
    .product_detail_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      z-index: 20;
      border-top: 1px solid #F2F1F0;
      i.icon-Share_actived{
        font-size: 20px;
        margin-right: 24px;
        display: inline-block;
      }
      .el-button.el-button--default,
      .el-button.el-button--search{
        width: calc(100% - 44px);
        padding: 0;
        min-width: auto;
      }
    }

    .basic {
      margin-top: 8px;
      width: 100%;
      margin-left: 0;
      >p,
      >div,
      >.comment,
      >.specList,
      >.colorList{
        padding: 0 20px;
      }
      .title{
        font-size: 20px;
      }
      .specList .spec{
        margin-right: 16px;
        margin-bottom: 16px;
      }
      .output_container,
      .input_container{
        padding: 0 20px;
        div.outputItem,
        div.inputItem{
          min-width: auto;
          margin-right: 16px;
          width: calc(33.3% - 16px);
          margin-bottom: 16px;
          &:nth-of-type(3n){
            margin-right: 0;
          }
        }
        .container{
          height: auto;
          opacity: 1;
          transition: all  .4s ease-in-out 0s;
        }
        >p{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 38px;
          margin-bottom: 0;
          i{
            display: inline-block;
            cursor: pointer;
            transform: rotateZ(0deg);
            transition: transform .3s;
            font-size: 12px;
          }
        }
        &.show{
          >p{
            i{
              transform: rotateZ(-90deg);
            }
          }
          .container{
            height: 0;
            opacity: 0;
            overflow: hidden;
          }
        }
      }
      .material_name {
        margin-top: 16px;
        .el-button{
          padding: 0 8px;
          width: auto;
          margin-bottom: 16px;
        }
      }
    }


  }
}
// 图文
.main .gallery{
  @include respond('768'){
    width: 100%;
    margin-top: 12px;
    overflow: hidden;
    background-color: #fff;
    >div{
      margin-bottom: 40px;
    }
    .inputWord{
      width: 100%;
      padding:16px 20px 0;
      .title{
        font-size: 16px;
      }
      .description{
        font-size: 14px;
        margin-top: 8px;
        
      }
    }
    .imageTextStyle1-2,
    .imageTextStyle1-1{
      >div{
        font-size: 0;
        display: block;
        .el-image{
          width: 100%;
          padding-bottom: 75%;
        }
        .inputWord{
          width: 100%;
        }
      }

    }
    .imageTextStyle1-1{
      >div{
        .inputWord{
          margin-left: 0;
        }
      }
    }
    .imageTextStyle1-2{
      >div{
        .inputWord{
          margin-right: 0;
        }
        .el-image{
          margin-left: 0;
        }
      }
    }

    .imageTextStyle1-3{
      .inputWord{
        margin-top: 0;
        .description{
          min-height: 36px;
        }
      }
    }
    .imageTextStyle1-4{
      >div{
        display: block;
        .inputWord{
          margin-bottom: 0;
          .description{
            min-height: 36px;
          }
        }
      }

    }
    .imageTextStyle2-1{
      >div{
        width: 100%;
        .inputWord{
          margin-top: 0;
          .title{
            min-height: 40px;
          }
          .description{
            min-height: 36px;
          }
        }
        &:first-of-type{
          margin-bottom: 40px;
        }
        &:last-of-type{
          margin-left: 0;
        }
      }
    }

    .imageTextStyle2-2{
      display: block;
      >div{
        display: block;
        width: 100%;
        .inputWord{
          margin-bottom: 0;
          .title{
            min-height: 40px;
          }
          .description{
            min-height: 36px;
          }
        }
        &:first-of-type{
          margin-bottom: 40px;
        }
        &:last-of-type{
          margin-left: 0;
        }
      }
    }

    .imageTextStyle2-3{
      display: block;
      >div{
        display: block;
        width: 100%;
        .inputWord{
          .title{
            min-height: 40px;
          }
          .description{
            min-height: 36px;
          }
        }
        &:first-of-type{
          margin-bottom: 40px;
          .inputWord{
            margin-top: 0;
          }
        }
        &:last-of-type{
          margin-left: 0;
          display: block;
          .inputWord{
            margin-bottom: 0;
          }
        }
      }
    }
    .imageTextStyle3-1{
      display: block;
      >div{
        width: 100%;
        .inputWord{
          margin-top: 0;
          .title{
            min-height: 40px;
          }
          .description{
            min-height: 36px;
          }
        }
        &:last-of-type{
          margin-left: 0;
        }
        &:first-of-type{
          margin-right: 0;
          margin-bottom: 40px;
        }
        &:nth-of-type(2){
          margin: 0;
          margin-bottom: 40px;
        }
      }
    }

    .imageTextStyle3-2{
      display: block;
      >div{
        display: block;
        width: 100%;
        .inputWord{
          margin-bottom: 0;
          .title{
            min-height: 40px;
          }
          .description{
            min-height: 36px;
          }
        }
        &:last-of-type{
          margin-left: 0;
        }
        &:first-of-type{
          margin-right: 0;
          margin-bottom: 40px;
        }
        &:nth-of-type(2){
          margin: 0;
          margin-bottom: 40px;
        }
      }
    }
  }
}


// 评论
.main #reviews{
  @include respond('768'){
    background-color: #fff;
    margin-top: 12px;
    .reviews{
      padding-top: 0;
      .commentList{
        &.pcShow{
          display: none;
        }
        &.phoneShow{
          padding-bottom: 8px;
          display: block;
          width: 100%;
          margin: 0 ;
          padding: 0;
          .comment_total{
            height: 54px;
            padding: 0 20px;
            justify-content: space-between;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #F2F1F0;
            >p{
              font-size: 14px;
              color: #363434;
              &:first-of-type{
                display: flex;
                align-items: center;
              }
              >span{
                margin-right: 8px;
                font-weight: 700;
              }
              >.el-rate{
                height: auto;
                line-height: normal;
                i{
                  font-size: 14px;
                  margin-right: -1px;
            
                }
              }
              >i{
                font-size: 12px;
                margin-left: 6px;
                transform: rotateZ(-90deg);
                display: inline-block;
                position: relative;
                bottom: 1px;

              }
            }
          }
         
         
        }
      }
    }
 

  }
}
.rampow_content  .main .extendData{
  @include respond('768'){
    // display: none;
    opacity: 0;
    width: 100%;
    height: 44px;
  
    transition: all 0.8s ease-out;
    position: fixed;
    top: 56px;
    width: 100%;
    z-index: 10;
    background-color: #FFFF;
    margin-top: 0;
    .productDetail{
      width: 100%;
      .category{
        max-width: 100%;
        width: 100%;
        min-width: 100%;
        overflow: auto;
        white-space: nowrap;
        >p{
          font-size: 14px;
          font-weight: normal;
          margin-right: 22px;
          line-height: 44px;
          color: #7e7e7e;
          &.active{
            color: #363434;
          }
        }
  
      }
      .product_info{
        display: none; 
      }

    }
  }
  
}
.main  .scroll .extendData {
  @include respond('768'){
    
    opacity: 1;
    // border-bottom: 1px solid #F2F1F0;
  
    .productDetail{
      position: relative;
      padding: 0 20px;
      &::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #F2F1F0;
      }
    }

  }

}

.main .scroll{
  @include respond('768'){

    #reviews .CustomerReviewsTop{
      margin-top: 56px;

    }
  }
}
// 说明书
.main #directions  {
  @include respond('768'){
    width: 100%;
    padding: 0 20px;
    max-width: 100%;
    background-color: #fff;
    margin-top: 12px;
    >p{
      height: 84px;
      font-size: 14px;
      padding: 0;
      text-align: left;
      font-weight: 700;
      align-items: center;
      display: flex;
    }
    >div{
      display: block;
      padding: 16px 0 ;
      font-size: 0;
      >p{
        margin-right: 0;
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        i{
          display: inline-block;
          cursor: pointer;
          transform: rotateZ(0deg);
          transition: transform .3s;
          font-size: 12px;
        }
      }
      >div{
        width: 100%;
        font-size: 14px;
        color: #7E7E7E;
        font-weight: normal;
      }
      &.show{
        >p{
          margin-bottom: 0;
          i{
            transform: rotateZ(-90deg);
          }
        }
        >div{
          height: 0;
          opacity: 0;
          overflow: hidden;
        }
      }
    }
  }}


  // 推荐
.main #recommendation{
  @include respond('768'){
    max-width: 100%;
    width: 100%;
    background-color: #fff;
    padding-bottom: 40px;
    >p{
      margin-top: 12px;
      font-size: 14px;
      font-weight: 700;
      text-align: left;
      padding-left: 20px;
      height: 54px;
      line-height: 54px;
      margin-bottom: 16px;
      padding-top: 0;
      border-bottom: 1px solid #f2f1f0;
    }
    .productContent{
      display: none;
    }
    .swiper-container{
      margin-left: 20px;
      width: calc(100% - 20px);
      display: block;
    }
    .specList{
      margin-top: 0px;
    }
    .productItem{
    
      .title{
        height: 44px;
      }
    }
  
  }

}

.main .detail{
  @include respond('768'){
    .module_share{
      display: none;
    }
  }
}
